<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>bootstrap form</title>
<script src="${basePath}jQuery Core 1.12.4/jquery-1.12.4.min.js"></script>
<!-- Bootstrap core CSS -->
<link href="${basePath}bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<!-- Optional Bootstrap Theme -->
<link href="data:text/css;charset=utf-8,"
	data-href="${basePath}bootstrap-3.3.7-dist/css/bootstrap-theme.min.css"
	rel="stylesheet" id="bs-theme-stylesheet">
	<!-- 分页插件的应用 -->
	<link 
	href="${basePath}pagination-2.0.7/css/pagination.css" rel="stylesheet"/>
	<script src="${basePath}pagination-2.0.7/js/pagination.min.js"></script>
<!-- bootstrap-datetimepicker -->

<script src="${basePath}bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<link
	href="${basePath}bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"
	rel="stylesheet" />
<script
	src="${basePath}bootstrap-datetimepicker/js/moment-with-locales.min.js"></script>
<script
	src="${basePath}bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>

<!-- Bootstrap core JavaScript
		<!-- Placed at the end of the document so the pages load faster -->

<script type="text/javascript">
	$(function() {		
		 $('#datetimepicker1,#datetimepicker2').datetimepicker({  
		        format: 'YYYY-MM-DD HH:mm:ss',  
		        locale: moment.locale('zh-cn')  
		    }); 
		 doAjaxQuery();
	});
</script>
<script type="text/javascript">
  function doAjaxQuery(){
	  $.ajax({
		  type:"POST",
	      url:"${basePath}StudentInfoAjaxQueryServlet",
		  dataType:"json",
		  data:$("#myForm").serialize(),
		  success:function(data){
			  
				doPaging(data);
			}  
	  });
  }
  //调用分页控件
  function doPaging(pageDatas){
	  $('#pager').pagination({
		  dataSource:pageDatas,
		  pageSize:3,
		  showGoInput:true,
		  showGoButton:true,
		  callback:function(data,pagination){
			  parseJsonData(data);
		  }
	  });
  }
//json解析处理函数
	function parseJsonData(data){
		//解析的结果串
		var strResult = "";
		// 使用jquery解析json对象，因为json是一个list数据结构，是一个数组结构，所以使用each函数进行解析
		// 如果json返回的是一个对象，则可以先将该对象转换为数组结构再进行遍历，转换方式： "["+data+"]"
		$.each( data, function(index, eachVal){ // 每个eachVal就是list中的一个bean对象
			strResult +="<tr>";	
			
			strResult +="<th scope='row'>";	
			strResult +=index+1;	
			strResult +="</th>";
			
			strResult +="<td>";	
			strResult +=eachVal.student_name;	
			strResult +="</td>";	
			
			strResult +="<td>";	
			strResult +=eachVal.sex;	
			strResult +="</td>";
			
			strResult +="<td>";	
			strResult +=eachVal.birthday;	
			strResult +="</td>";
			
			strResult +="<td>";	
			strResult +=eachVal.address_id;	
			strResult +="</td>";
			
			strResult +="<td>";	
			strResult +=eachVal.stu_tel;	
			strResult +="</td>";
			
			
			strResult +="<td><img style='width: 30px; heigth: 30px;' src='";	
			strResult +=eachVal.stu_img;	
			strResult +="'></td>";
					
			strResult +="</tr>";
			});
		$("#tbShow").html(strResult);
}

</script>
</head>

<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12">
				<div class="row">
					<div class="col-md-2"></div>
					<div class="col-md-8">
						<form class="form-horizontal" id="myForm" >
							<div class="form-group"></div>
							<div class="form-group">
								<label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
								<div class="col-sm-4">
									<input type="text" class="form-control" id="stuName"
										name="student_name" placeholder="请输入学生姓名">
								</div>

								<label for="inputEmail3" class="col-sm-2 control-label">性别</label>
								<div class="col-sm-4">
									<label class="radio-inline"> <input type="radio"
										id="stusex2" name="sex" value="女"> 女
									</label> <label class="radio-inline"> <input type="radio"
										id="stusex2" name="sex" value="男"> 男
									</label>
								</div>
							</div>
							<div class="form-group">
								<label for="inputPassword3" class="col-sm-2 control-label">出生日期</label>
								<div class="col-sm-4">
									<div class='input-group date' id='datetimepicker1'>
										<input type='text' class="form-control" id="stuBirthday"
											name="birthday" /> <span class="input-group-addon">
											<span class="glyphicon glyphicon-calendar"></span>
										</span>
									</div>
								</div>
								<div class="form-group">	
								<label for="inputPassword3" class="col-sm-2 control-label"></label>							
								<div class="col-sm-4">
									<div class='input-group date' id='datetimepicker2'>
										<input type='text' class="form-control" id="stuBirthday2"
											name="birthday2" /> <span class="input-group-addon">
											<span class="glyphicon glyphicon-calendar"></span>
										</span>
									</div>
								</div>

								<label for="inputPassword3" class="col-sm-2 control-label">地址</label>
								<div class="col-sm-4">
									<input type="text" class="form-control" id="stuAddress"
										name="address_id" placeholder="请输入地址">
								</div>
							</div>
							<div class="form-group">
								<label for="inputPassword3" class="col-sm-2 control-label">电话</label>
								<div class="col-sm-4">
									<input type="text" class="form-control" id="stuTel"
										name="stu_tel" placeholder="请输入电话">
								</div>

							</div>
							<div class="form-group">
								<div class="col-sm-offset-4 col-sm-4">
									<button type="button" class="btn btn-default" onclick="doAjaxQuery()">查询</button>
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<button type="reset" class="btn btn-default">重置</button>
								</div>
							</div>
						</form>
					</div>
					<div class="col-md-2"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="bs-exeample" data-example-id="hoverable-table">
    <table class="table table-hover">
      
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>出生日期</th>
          <th>地址</th>
          <th>电话</th>
          <th>头像</th>
        </tr>
      </thead>
   <tbody id="tbShow">
   </tbody>
    </table>
    <div id="pager">
    <!-- pagination所需容器 -->
    <div class="m-pagination"></div>
    </div>
  </div>

</body>

</html>